<template>
  <view class="chat-box">
    <scroll-view scroll-y class="cu-chat" :scroll-top="scrollTop" show-scrollbar scroll-with-animation>
      <view class="cu-item" v-for="(item, index) in chats" :key="index">
        <template v-if="item.type === 'enter'">
          <view class="bg-orange avatar-system"><cu-icon name="notice" color="#ffffff"></cu-icon></view>
          <view class="nickname text-orange">系统消息:</view>
          <view class="main text-orange">欢迎【{{ item.data.uname }}】进入房间</view>
        </template>
        <template v-else-if="item.type === 'chat'">
          <cu-avatar v-if="item.data.avatar" size="40upx" :img="item.data.avatar"></cu-avatar>
          <view v-else class="avatar-system" :style="{ backgroundColor: item.data.message.color }"><cu-icon name="question" color="#FFFFFF"></cu-icon></view>
          <view class="nickname" :style="{ color: item.data.message.color }">{{ item.data.uname }}:</view>
          <view class="main" :style="{ color: item.data.message.color }">{{ item.data.message.text }}</view>
        </template>
      </view>
    </scroll-view>

    <view class="chatInput">
      <!-- <view class="action"><text class="cuIcon-emojifill text-grey"></text></view> -->
      <input
        class="inputInner"
        :adjust-position="false"
        v-model="message.text"
        :focus="false"
        confirm-type="send"
        maxlength="40"
        :cursor-spacing="10"
        @focus="InputFocus"
        @blur="InputBlur"
        placeholder="请输入聊天内容"
      />
      <button class="sendBtn" @click="sendMessage" @keyup.enter="sendMessage">发送弹幕</button>
    </view>
  </view>
</template>
<script>
import cuAvatar from "@/components/cuAvatar";
import cuIcon from "@/components/cuIcon";
import uniApp from "@/utils/uni-app";
import { getRandomColor } from "@/utils";
let chatNode;
export default {
  components: {
    cuAvatar,
    cuIcon
  },
  data() {
    return {
      message: {
        color: "#0088cc",
        text: ""
      },
      InputBottom: 0,
      scrollTop: 0
    };
  },
  computed: {
    chats() {
      return this.$store.state.video.chats;
    }
  },
  watch: {
    chats(n) {
      this.scrollTop = n.length * 925;
      this.$forceUpdate();
    }
  },
  methods: {
    InputFocus(e) {
      this.InputBottom = e.detail.height;
    },
    InputBlur(e) {
      this.InputBottom = 0;
    },
    sendMessage() {
      if (this.message.text === "") {
        uniApp.toast("请输入聊天内容");
        return false;
      }
      getApp().globalData.socket.sendSocketMessage({
        c: "matchChat",
        a: "chat", // enter
        data: {
          id: this.$store.state.video.lives[this.$store.state.video.currentLive].id,
          message: Object.assign(this.message, {
            color: getRandomColor() //"#f0ad4e"
          })
        },
        cb: "video/CHAT"
      });
      this.message.text = "";
    }
  }
};
</script>
<style scoped lang="scss">
.chat-box {
  height: 100%;
  .cu-chat {
    background-color: #ffffff;
    padding: 5upx 0;
    height: calc(100% - 100upx);
    .uni-scroll-view > div {
      height: 100%;
    }
    .cu-item {
      padding: 0 20upx;
      height: 50upx;
      display: flex;
      align-items: flex-start;
      .avatar-system {
        width: 40upx;
        height: 40upx;
        border-radius: 100%;
        line-height: 40upx;
        text-align: center;
      }
      .nickname {
        font-size: 24upx;
        margin: 0 10upx;
        line-height: 50upx;
      }
      > .main {
        margin: 0;
        background-color: transparent;
        line-height: 50upx;
        font-size: 24upx;
        padding: 0;
        white-space: normal;
        &:not([class*="bg-"]) {
          &::before {
            display: none;
          }
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

// 输入框
.chatInput {
  padding-right: 10px;
  background-color: #ffffff;
  min-height: 100upx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.inputInner {
  overflow: initial;
  line-height: 32px;
  height: 32px;
  min-height: 32px;
  flex: 1;
  font-size: 15px;
  margin: 0 10px;
  padding: 0 20upx;
  border: 1upx solid rgba(0, 0, 0, 0.1);
  border-radius: 2500upx;
}
.sendBtn {
  border-radius: 2500upx;
  background-color: #fb7299;
  color: #ffffff;
  font-size: 24upx;
}
.sendBtn::after {
  border: none;
}
</style>
